import { map } from 'lodash'
import React, { useState } from 'react'
import classNames from 'classnames'

import Log from './log'
import Setting from './setting'
import Shortcut from './shortcut'
import useSubs from '../../hooks/useSubs'
import scss from './styles/more-info.module.scss'

const tabs = [
  {
    label: '设置',
    value: 'set',
  },
  {
    label: '快捷方式',
    value: 'shortcut',
  },
  {
    label: '日志',
    value: 'log',
  },
]

const MoreInfo = () => {
  const [curTab, setCurTab] = useState('set')
  const [visible, setVisible] = useState(false)

  useSubs(({ action, val }) => {
    if (action === 'showMoreInfo') {
      setVisible(val)
    }
  })

  return (
    <div style={{ display: visible ? 'block' : 'none' }} className={scss.moreInfo} id="moreInfo">
      <div className={scss.wrap}>
        <div className={scss.tabContainer}>
          <div className={scss.tabs}>
            {map(tabs, ({ label, value }) => {
              return (
                <div
                  onClick={() => setCurTab(value)}
                  key={value}
                  className={classNames(value === curTab ? scss.titleActive : scss.title, scss.label)}
                >
                  {label}
                </div>
              )
            })}
          </div>
        </div>
        <div className={scss.content}>
          <Setting visible={curTab === 'set'} />
          <Shortcut visible={curTab === 'shortcut'} />
          <Log visible={curTab === 'log'} />
        </div>
      </div>
    </div>
  )
}

export default MoreInfo
